<template>
	<view class="">
		<view class="title-box">
			<u-cell-group>
				<u-cell-item title="报事报修" :arrow="false" :title-style="{fontSize:'40rpx',fontWeight:700,color:'#000'}">
					<text class="but-right" @click="openGuestList">历史记录</text>
				</u-cell-item>
			</u-cell-group>
		</view>

		<view class="form">
			<u-form :model="form" ref="uForm" :rules="rules" :labelWidth="160" :label-style="{'paddingLeft':'10rpx'}">
				<view class="item-box">
					<u-form-item label="当前房产" prop="roomId" :border-bottom="false">
						<view @tap="selectBol.roomId=true" class="wd-100">
							<u-section :title="property || '请选择'" color="#4A7ED7" :show-line="false"  :bold="false"
								:sub-title="null"></u-section>
							<u-select v-model="selectBol.roomId" :list="seleVisit" @confirm="selctConfirm($event,'roomId',true)"></u-select>
						</view>
					</u-form-item>
					<view class="item-box">
						<u-form-item prop="content">
							<u-input v-model="form.content" placeholder="您遇到的问题~" :type="tareaType.type" :border="tareaType.border"
								:height="tareaType.height" :auto-height="tareaType.autoHeight" :maxlength="tareaType.maxlength" />
						</u-form-item>
					</view>
					<u-upload :action="action" :file-list="fileList" width="130rpx" height="130rpx"></u-upload>
				</view>
				<view class="item-box">
					<u-form-item label="报事报修类型" prop="complaintType" :labelWidth="180">
						<view @tap="selectBol.complaintType=true" class="wd-100">
							<u-section :sub-title="repair || '请选择'" :show-line="false" color="#999" :bold="false"
								:title="null"></u-section>
							<u-select v-model="selectBol.complaintType" :list="seleRepType"
								@confirm="selctConfirm($event,'complaintType',false)"></u-select>
						</view>
					</u-form-item>
				</view>
			</u-form>
			<!-- <view class="present mt-40">
				当前用户：佳冰（130****9220）
			</view> -->
		</view>
		<view class="po-but">
			<u-button type="primary" shape="circle" @click="submit">立即提交</u-button>
		</view>
	</view>
</template>

<script>
	import {
		reportForRepairsSubmitForm
	} from '@/api/base/reportForRepairsApi.js'
	import {
		householdinfo
	} from '@/api/base/householdinfoApi.js'
	
	import { mapGetters } from 'vuex';
	
	export default {
		data() {
			return {
				property: '',
				repair: '',
				fileList: [],
				action: 'http://www.example.com/upload',
				tareaType: {
					type: 'textarea',
					border: false,
					height: 200,
					autoHeight: true,
					maxlength: 200
				},
				form: {
					content: '',
					proprietorId: '',
					complaintType:'',
					roomId: '',
					status:''
				},
				sr: '',
				show: false,
				seleRepType: [],
				seleVisit: [],
				selectBol: {
					roomId: false,
					complaintType: false
				},
				rules: {
					roomId: [{
						required: true,
						message: '请选择当前房产',
						trigger: ['change', 'blur'],
					}]
				},
			}
		},
		mounted() {
			this.$nextTick(()=>{
				this.$refs.uForm.setRules(this.rules);
			}),
			this.currentProperty();
			this.getOptions();
		},
		computed: {
		  ...mapGetters(['user_info']),
		},
		methods: {
			getOptions() {
			  this.seleRepType =  this.$dictTools.dictList('COMPLAINT_TYPE').map(e=>({label:e.text,value:e.value}));
					console.log(this.seleRepType);
			},
			currentProperty() {
			    const proprietorId = this.user_info.id;
						console.log(this.user_info,'this.user_info')
			    householdinfo({ proprietorId })
			      .then(response => {
			       const newSelectData = response.map(data => ({
			           value: data.roomId, 
			           label: data.roomInfo
			         }));
			
			        this.seleVisit = newSelectData; 
						console.log(this.seleVisit,'this.seleVisit');
			      })
			      .catch(error => {
			        console.error('获取当前房产失败', error);
			      });
			  },
			  openGuestList(){
			  	uni.navigateTo({
			  		url:'/subPack/repairsList'
			  	})
			  },
			submit() {
				this.form.status = 1;
				this.$refs.uForm.validate().then(res => {
					console.log(res,'res')
					reportForRepairsSubmitForm(this.form, !this.form.id).then(respond => {
						uni.$emit('formBack', {
							data: respond
						})
						setTimeout(() => {
						  uni.navigateBack({
						    delta: 1
						  })
						}, 800) 
					})
				})
			},
			selctConfirm(e, type, isVisitorAim) {
			    if (isVisitorAim) {
			      this.form[type] = e[0].value;
			      this.property = e[0].label;
			    } else {
			      this.form[type] = e[0].value;
			      this.repair = e[0].label;
			    }
			  },
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		
	}
</script>

<style lang="scss" scoped>
	.po-but {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 30rpx 20rpx;
		box-shadow: 0px -5px 5px -5px rgba(0, 0, 0, 0.2);
	}

	.present {
		color: $-color-muted;
		text-align: center;
	}

	/deep/.u-input__right-icon {
		position: absolute;
		bottom: 10rpx;
		right: 10rpx;
	}

	/deep/.u-add-wrap {
		border: 1px dashed $-color-border-wy;
		background-color: transparent !important;
		margin: 50rpx 0;

		.u-add-tips {
			display: none;
		}

		.u-icon__icon {
			color: $-color-but-wy;
		}
	}

	.item-box {
		position: relative;
		margin-bottom: 20rpx;
		padding: 0 30rpx;
		background-color: #fff;

		&.house {
			display: flex;
			justify-content: space-between;
		}

		/deep/.u-input__textarea {
			padding: 20rpx !important;
			background-color: $-color-item-bg;
			border-radius: 10rpx;
		}
	}

	.but-right {
		border: 1px solid $-color-but-wy;
		color: $-color-but-wy;
		border-radius: 50rpx;
		text-align: center;
		padding: 7rpx 20rpx;
	}

	/deep/.u-form-item {
		padding: 10rpx 10rpx 10rpx 0;

		.u-form-item--left__content__label {
			padding: 0 !important;
		}
	}
</style>